$(function(){
    var initScreen=function(callback){//初始化html  font-size
            //$("html").css("font-size",document.documentElement.clientHeight/document.documentElement.clientWidth<1.5 ? (document.documentElement.clientHeight/603*312.5+"%") : (document.documentElement.clientWidth/375*312.5+"%")); //单屏全屏布局时使用,短屏下自动缩放
            $("html").css("font-size",document.documentElement.clientWidth/375*312.5+"%");//长页面时使用,不缩放
            if(callback)callback();
        }
    initScreen(function(){
        //屏幕改变重置
        window.addEventListener("orientationchange" in window ? "orientationchange" : "resize",function(e){
            var st=setTimeout(initScreen,300);
        }, false);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var data0 = splitData([
            // 时间，开盘，收盘，最低，最高
            
            ['2016/1/4',31080.00,31200.00,31850.00,30990.00],
            ['2016/1/5',31210.00,31390.00,31530.00,31200.00],
            ['2016/1/6',31360.00,31530.00,31820.00,31260.00],
            ['2016/1/7',31550.00,32450.00,32520.00,31490.00],
            ['2016/1/8',32320.00,31570.00,32400.00,31480.00],
            ['2016/1/11',31630.00,31340.00,31860.00,31270.00],
            ['2016/1/12',31350.00,31260.00,31430.00,31130.00],
            ['2016/1/13',31230.00,31890.00,31990.00,31120.00],
            ['2016/1/14',31890.00,31260.00,31950.00,31090.00],
            ['2016/1/15',31260.00,31390.00,31860.00,31150.00],
            ['2016/1/18',31420.00,31450.00,31560.00,31260.00],
            ['2016/1/19',31400.00,31640.00,31950.00,31340.00],
            ['2016/1/20',31660.00,31940.00,32000.00,31590.00],
            ['2016/1/21',31890.00,31800.00,31970.00,31350.00],
            ['2016/1/22',31740.00,31660.00,32270.00,31640.00],
            ['2016/1/25',31690.00,32010.00,32180.00,31630.00],
            ['2016/1/26',32050.00,32620.00,32710.00,32010.00],
            ['2016/1/27',32570.00,32730.00,32730.00,32280.00],
            ['2016/1/28',32580.00,32060.00,32640.00,31690.00],
            ['2016/1/29',32090.00,32130.00,32170.00,31890.00],
            ['2016/2/1',32080.00,32300.00,32410.00,31980.00],
            ['2016/2/2',32280.00,32150.00,32360.00,32020.00],
            ['2016/2/3',32150.00,32850.00,33210.00,32100.00],
            ['2016/2/4',32980.00,33340.00,33380.00,32830.00],
            ['2016/2/5',33310.00,33170.00,33450.00,32820.00],
            ['2016/2/8',33390.00,34330.00,34470.00,33300.00],
            ['2016/2/9',34270.00,34040.00,34440.00,34030.00],
            ['2016/2/10',34020.00,34020.00,34140.00,33720.00],
            ['2016/2/11',34120.00,35020.00,35490.00,34120.00],
            ['2016/2/12',34940.00,35020.00,35180.00,34820.00],
            ['2016/2/15',34960.00,34020.00,34980.00,33770.00],
            ['2016/2/16',33980.00,33940.00,34310.00,33740.00],
            ['2016/2/17',33970.00,34110.00,34280.00,33780.00],
            ['2016/2/18',34060.00,34410.00,34460.00,33870.00],
            ['2016/2/19',34330.00,34270.00,34440.00,34040.00],
            ['2016/2/22',34140.00,33800.00,34160.00,33320.00],
            ['2016/2/23',33850.00,33990.00,34130.00,33830.00],
            ['2016/2/24',34190.00,33960.00,34720.00,33890.00],
            ['2016/2/25',33970.00,33920.00,34180.00,33590.00],
            ['2016/2/26',33850.00,32990.00,33980.00,32880.00],
            ['2016/2/29',32990.00,33390.00,33410.00,32800.00],
            ['2016/3/1',33390.00,33230.00,33690.00,32990.00],
            ['2016/3/2',33170.00,33550.00,33640.00,33060.00],
            ['2016/3/3',33500.00,33900.00,33970.00,33270.00],
            ['2016/3/4',33900.00,34460.00,35150.00,33830.00],
            ['2016/3/7',34740.00,34710.00,35060.00,34390.00],
            ['2016/3/8',34770.00,34240.00,34890.00,34140.00],
            ['2016/3/9',34190.00,34070.00,34320.00,33790.00],
            ['2016/3/10',34060.00,34530.00,34750.00,33750.00],
            ['2016/3/11',34650.00,34560.00,34930.00,34360.00],
            ['2016/3/14',34390.00,33990.00,35010.00,33930.00],
            ['2016/3/15',34120.00,33990.00,34220.00,33810.00],
            ['2016/3/16',34000.00,34760.00,34780.00,33870.00],
            ['2016/3/17',34670.00,35210.00,35500.00,34480.00],
            ['2016/3/18',35260.00,34830.00,35560.00,34700.00],
            ['2016/3/21',34800.00,34990.00,35130.00,34750.00],
            ['2016/3/22',34960.00,35160.00,35430.00,34940.00],
            ['2016/3/23',35140.00,33820.00,35230.00,33820.00],
            ['2016/3/24',33900.00,33780.00,34120.00,33770.00],
            ['2016/3/28',33870.00,33890.00,34210.00,33780.00],
            ['2016/3/29',33980.00,34110.00,34120.00,33540.00],
            ['2016/3/30',34140.00,33720.00,34210.00,33680.00],
            ['2016/3/31',33810.00,34050.00,34260.00,33600.00],
            ['2016/4/1',34070.00,33310.00,34140.00,32760.00],
            ['2016/4/4',33210.00,33030.00,33380.00,32970.00],
            ['2016/4/5',33060.00,33500.00,33640.00,33050.00],
            ['2016/4/6',33480.00,33410.00,33650.00,33100.00],
        ]);
        function splitData(rawData) {
            var categoryData = [];
            var values = []
            for (var i = 0; i < rawData.length; i++) {
                categoryData.push(rawData[i].splice(0, 1)[0]);
                values.push(rawData[i])
            }
            return {
                categoryData: categoryData,
                values: values
            };
        };
        option = {
            /*backgroundColor: '#1b1b1b',*/
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                }
            },
            legend: {
                x: 'right',
                y: '10%',
                //data: ['海峡原油'],
                zlevel: '999',
            },
            grid: {
                left: 0,
                right: '18%',
                bottom: '45px',
                top:'5%'
            },
            xAxis: {
                type: 'category',
                data: data0.categoryData,
                scale: true,
                boundaryGap : false,
                axisLine: {onZero: false},
                splitLine: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#666666'
                    }
                }
            },
            yAxis: {
                scale: true,
                position: 'right',
                splitArea: {
                    show: true
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#666666'
                    }
                }
            },
            dataZoom: [
                {
                    fillerColor: 'rgba(0,0,0,1)',
                    type: 'inside',
                    start: 94,
                    end: 100
                },
                {
                    show: true,
                    type: 'slider',
                    y: '92%',
                    start: 50,
                    end: 100
                }
            ],
            series: [
                {
                    name: '海峡原油',
                    type: 'candlestick',
                    data: data0.values,
                    barMaxWidth: 20,
                    itemStyle: {
                        normal: {
                            color: 'red', // 阳线填充颜色
                            color0: 'lightgreen', // 阴线填充颜色
                            lineStyle: {
                                width: 2,
                                color: 'orange', // 阳线边框颜色
                                color0: 'green' // 阴线边框颜色
                            },
                            backgroundColor:'#fff'
                        },
                        emphasis: {
                            color: 'black', // 阳线填充颜色
                            color0: 'white' // 阴线填充颜色
                            }       
                        }
                }
            ]
        };

        function formatDate(data) {
            for (var i = 0; i < data.length; i++) {
                var item = data[i];
                var date = new Date(item[0].replace('-', '/'));
                item[0] = +date;
            }
            return data;
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        //点击时间筛选数据
        $(".time-items li").on('touchstart mousedown',function(e){
           $(".time-items li").removeClass("cur");
           $(this).addClass("cur");
        });

        $(".btn").on('touchstart mousedown',function(e){
            $(".pop").show();
        });
        $(".confirm").on('touchstart mousedown',function(e){
            $(".pop").hide();
        });
        //减少金额
        $('#del').on('touchstart mousedown',function(e){
            var val = $('.input').val();
            if(val==0 || val=='undefined' || val<100){
                return false;
            }else{
                $('.input').val(val-=100);
            }
        });
        //增加金额
        $('#add').on('touchstart mousedown',function(e){
            if($('.input').val()==''){
                $('.input').val(0);
            }
            var val = parseInt($('.input').val());
            $('.input').val(val+=100);
        })
    });
})